<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/*尺寸问题：屏幕宽高比不一致，限定一个宽高范围
			min-width属性：最小宽度    min-height属性：最小高度
			max-width属性：最大宽度    max-height属性：最大高度
			*/
		     div{
				width: 80%;/*默认宽度*/
				min-width: 500px;/*内容最小宽度是500px，不能改变*/
				max-width: 800px;/*页面尺寸：最小是500px，最大时600px，默认80%*/
				/*定好最小跟最大宽高，pc：80% 300px
				                    移动：500~600宽度【页面不变】 300px
									自适应
				*/
				height: 300px;
				background: #00ffff;
			 }
			 /*
			 html结构 div--.container  内层div--.box  写lorem
			 css结构  .container样式：背景颜色#f0f0f0;
			                          padding:200px;
									  文本居中；
					  .box样式：背景颜色#4caf50;
					          文字改成白色
							  宽度60%
							  宽度范围：500~600宽度【页面不变】
							  margin:auto;
			 */
		.container{
			background: #f0f0f0;
			padding:200px;
			text-align: center;
		}
		.box{
			background: #4caf50;
			color: white;
			width: 60%;
			min-width: 500px;
			max-width: 600px;
			margin:auto;
		}
		</style>
		<div class="container">
			<div class="box">
			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati velit laboriosam aut. Sed quam, quisquam nobis impedit rerum quis corrupti eum, quod et cupiditate non quos minima sunt soluta! Debitis.
			</div>
		</div>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum atque aut vero ullam corporis labore, modi odio quasi harum reiciendis tenetur sequi, blanditiis quo nobis voluptatibus unde doloribus, cum incidunt.</div>
	</body>
</html>